<!--
* description: 表单组
* author: tfy
* createdDate: 2019-10-08
* modify:dxuem 增加标签/按钮组接收参数 getVal
* modify:dxuem dxuem 2019-11-21  emitCode() 接收弹窗返回
-->
<template>
<div>

  <el-row v-if="tableComponents.length>0&&tableComponents[0].pageArea!=undefined" v-for="page in getPageArea()" :key="page.compKey" :gutter="26">
     <div
            v-if="page.pageArea !== ''"
            class="filter-container filter-title"
          >
            {{ page.pageArea }}
          </div>
          <div v-for="(item,index) in $crmcf.__group(tableComponents,4)" :key="index">
    <component
        v-for="comp in item.filter(o =>((page.pageArea === '' && !o.pageArea) || o.pageArea === page.pageArea))"
      :ref="comp.compKey"
      :span="comp.span"
      :key="comp.compKey"
      :validrule="comp.validrule"
      :labelName="comp.labelName"
      :codeField="comp.codeField"
      :textField="comp.textField"
      :extralField="comp.extralField"
      :disabled="comp.disabled"
      :exparams="comp.exparams?comp.exparams:''"
      :class="comp.isRequireUpload&&comp.isUpload?'crm-label-required choosefile':'choosefile'"
      :is="comp.component"
      :isMust="comp.isMust"
      :isRequire="comp.isRequire"
      :style="comp.hiden?'display:none':'display:block'"
      :inputType="comp.inputType"
      :code="formField[comp.codeField]?formField[comp.codeField]:''"
      :text="formField[comp.textField]?formField[comp.textField]:''"
      :lookuptype="comp.lookuptype"
      @changeDropValue="getDropValue"
      @changeCode="comp.changeCode"
      @changeExtralField="comp.changeExtralField"
      @sendChangeCode="sendChangeCode"
      @getCode="comp.getCode"
      @emitCode="comp.emitCode"
      @delFiles="comp.delFiles"
      @clickEvent="comp.clickEvent"
      :Opt="comp.Opt"
      :checkedOpt="comp.checkedOpt"
      :changeCodeArray="comp.changeCodeArray"
      :isMul="comp.isMul"
      :getVal="comp.getVal"
      :submitBtn="comp.submitBtn"
      :clearable="comp.clearable"
      :extralParams="comp.extralParams"
      :isShowUnit="comp.isShowUnit?comp.isShowUnit:''"
      :show="comp.show"
      :fileSize="comp.fileSize"
      :attribute="comp.attribute"
      :isshow="comp.isshow"
      :filterable="comp.filterable"
    ></component>
          </div>
</el-row>
 <div v-if="!(tableComponents.length>0&&tableComponents[0].pageArea!=undefined)" style="display: grid;" v-for="(item,index) in $crmcf.__group(tableComponents,4)" :key="index">
   <el-row> 
    <component
      v-for="comp in item.filter(o => o.isHidden===undefined|| o.isHidden===true)"
      :ref="comp.compKey"
      :span="comp.span"
      :key="comp.compKey"
      :labelName="comp.labelName"
      :codeField="comp.codeField"
      :textField="comp.textField"
      :extralField="comp.extralField"
      :validrule="comp.validrule"
      :disabled="comp.disabled"
      :exparams="comp.exparams?comp.exparams:''"
      :class="comp.isRequireUpload&&comp.isUpload?'crm-label-required choosefile':'choosefile'"
      :is="comp.component"
      :isMust="comp.isMust"
      :isRequire="comp.isRequire"
      :style="[comp.hiden?'display:none':'display:block']"
      :inputType="comp.inputType"
      :code="formField[comp.codeField]?formField[comp.codeField]:''"
      :text="formField[comp.textField]?formField[comp.textField]:''"
      :lookuptype="comp.lookuptype"
      @changeDropValue="getDropValue"
      @changeCode="comp.changeCode"
      @changeExtralField="comp.changeExtralField"
      @sendChangeCode="sendChangeCode"
      @getCode="comp.getCode"
      @emitCode="comp.emitCode"
      @delFiles="comp.delFiles"
      @clickEvent="comp.clickEvent"
      :Opt="comp.Opt"
      :checkedOpt="comp.checkedOpt"
      :changeCodeArray="comp.changeCodeArray"
      :isMul="comp.isMul"
      :getVal="comp.getVal"
      :submitBtn="comp.submitBtn"
      :clearable="comp.clearable"
      :extralParams="comp.extralParams"
      :isShowUnit="comp.isShowUnit?comp.isShowUnit:''"
      :show="comp.show"
      :fileSize="comp.fileSize"
      :accepttype="comp.accepttype"
      :isautoupload="comp.isautoupload"
      :limit="comp.limit"
      :attribute="comp.attribute"
      :isshow="comp.isshow"
      :filterable="comp.filterable"
      >
    ></component>
    </el-row>
     <p  v-for="comp in item"   :key="comp.compKey" v-if="comp.labelName=='用车人备用电话'" style="background-color: rgb(241, 241, 241) !important;height: 10px;margin: 0;padding: 0;"></p>
  <p  v-for="comp in item"   :key="comp.compKey" v-if="comp.p=='备用电话'" style="background-color: rgb(241, 241, 241) !important;height: 10px;margin: 0;padding: 0;"></p>
  
  </div>
 
</div>
</template>
<script>
import { dropdownMixins } from "@/components/mixins/dropdownMixins";
import { formMixins } from "@/components/mixins/formMixins";
export default { 
  name: "crmGroupForm",
  mixins: [dropdownMixins,formMixins],
  props: {
    dynamicComponentss: {
      type: Array,
      default: function() {
        return [];
      }
    },
    values:{
      type:Object,
      default: function() {
        return {};
      }
    }
  },
  created(){
    var that =this
  },
  data() {
    return {
      tableComponents: this.dynamicComponentss,
      formField: this.values,
      pageAreas:[],
      count:0
    };
  },
  watch:{
  },
  methods:{
    //  code, text, this.codeField, this.comType, null, this.textField, this.otherField, selectData
   
    sendChangeCode(code, text,nameCode, name){
      
      this.formField[text]=code
       this.formField[nameCode]=name
    },
    getDropValue(val,txt,comName){
      let that=this
      that.$refs[comName][0].getData(val,txt,comName)
      if(that.count>1){
        that.$refs[comName][0].modelCode=''
      }
      that.count++
    },

      getPageArea(){
     if (this.pageAreas.length === 0) {
        this.pageAreas = this.$utils.getPageArea(this, 'tableComponents')
      }
      return this.pageAreas
     }
  }
};
</script>
<style>
</style>
